<?php if(!class_exists('raintpl')){exit;}?><?php $tpl = new RainTPL;$tpl_dir_temp = self::$tpl_dir;$tpl->assign( $this->var );$tpl->draw( dirname("header") . ( substr("header",-1,1) != "/" ? "/" : "" ) . basename("header") );?>

<?php echo aw_showcase(); ?>
<?php echo carouFredSel(); ?>

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : '612262128827570',                        // App ID from the app dashboard
      status     : true,                                 // Check Facebook Login status
      xfbml      : true                                  // Look for social plugins on the page
    });

    // Additional initialization code such as adding Event Listeners goes here
  };

  // Load the SDK asynchronously
  (function(){
     // If we've already installed the SDK, we're done
     if (document.getElementById('facebook-jssdk')) {return;}

     // Get the first script element, which we'll use to find the parent node
     var firstScriptElement = document.getElementsByTagName('script')[0];

     // Create a new script element and set its id
     var facebookJS = document.createElement('script'); 
     facebookJS.id = 'facebook-jssdk';

     // Set the new script's source to the source of the Facebook JS SDK
     facebookJS.src = '//connect.facebook.net/en_US/all.js';

     // Insert the Facebook JS SDK into the DOM
     firstScriptElement.parentNode.insertBefore(facebookJS, firstScriptElement);
   }());
</script>

<div class ="wrapper">

	<div class = "main" id = "gallery">
		<h1 class = "fr"><?php echo $e['gallery'];?></h1>

		<div class = "content">

			<div id = "wrapper-plaything">
				<img src="http://localhost/waterfantasy/html/images/btn-prev.png" id = "btn-prev" class = "btn-prev">
				<img src="http://localhost/waterfantasy/html/images/btn-next.png" id = "btn-next" class = "btn-next">
				<ul id = "plaything">
					<?php $counter1=-1; if( isset($all_gallery) && is_array($all_gallery) && sizeof($all_gallery) ) foreach( $all_gallery as $key1 => $value1 ){ $counter1++; ?>
					<li>
						<a href = "gallery.html?gid=<?php echo $value1["gid"];?>">
							<img src = "<?php echo $value1["image"];?>" class = "thumb" width = "74" height = "74" data = "<?php echo $counter1;?>">
						</a>
						<span class = "title"><?php echo $value1["plaything"];?></span>
					</li>
					<?php } ?>
				</ul>
			</div>

			<div class = "social-btn">
				<div class="fb-like" data-layout="standard" data-action="like" data-width="100" data-show-faces="false" data-share="true"></div>
			</div>

			<div class="gallery">
				<?php $counter1=-1; if( isset($all_picture) && is_array($all_picture) && sizeof($all_picture) ) foreach( $all_picture as $key1 => $value1 ){ $counter1++; ?>
				<div class="showcase-slide">
					<div class="showcase-content">
						<img src = "<?php echo $value1["image"];?>" />
					</div>
					<div class="showcase-thumbnail">
						<img src = "<?php echo $value1["thumb"];?>" />
					</div>
				</div>
				<?php } ?>
			</div>

			<br>
			<h2><?php echo $gallery['plaything'];?></h2>
			<p>
				<?php echo $gallery['detail'];?>
			</p>

			<br>

			<h3><?php echo $e['notice'];?></h3>
			<p>
				<?php echo $gallery['warning'];?>
			</p>
		</div>
	</div>

	<div class = "sidebar">
		<ul>
			<li><?php echo $e['gallery'];?> & <?php echo $e['channel'];?></li>
			<li><a href = "gallery.html"><?php echo $e['gallery'];?></a></li>
			<li><a href = "channel.html"><?php echo $e['channel'];?></a></li>
		</ul>
	</div>
</div>

<?php echo carouFredSel(); ?>

<script>

$(document).ready(function(){

	$("#plaything .thumb").mouseover(function(){

		var title = $(this).parent().parent().find("span");
		var w = title.width();

		title.css("margin-left", (w-44)*-1/2+"px");
		title.show();

//		console.log(title.offset().left + w);

		if(title.offset().left < 480){
			title.css("margin-left", "-30px");
		}
/*
		if((title.offset().left+w) > 1000){
			title.css("margin-left", "100px");
		}
*/
	});

	$("#plaything .thumb").mouseout(function(){
		$(this).parent().parent().find("span").hide();
	});

	$(".gallery").awShowcase({
		content_width:			680,
		content_height:			400,
		fit_to_parent:			false,
		auto:					true,
		interval:				3000,
		continuous:				false,
		loading:				true,
		arrows:					true,
		buttons:				false,
		keybord_keys:			true,
		pauseonover:			true,
		stoponclick:			true,
		transition:				'fade', /* hslide/vslide/fade */
		transition_delay:		300,
		transition_speed:		500,
		thumbnails:				true,
		thumbnails_position:	'outside-last', /* outside-last/outside-first/inside-last/inside-first */
		thumbnails_direction:	'horizontal', /* vertical/horizontal */
		thumbnails_slidex:		0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
		dynamic_height:			false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
		speed_change:			false, /* Set to true to prevent users from swithing more then one slide at once. */
		viewline:				false, /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */
		custom_function : opengraph
	});

	function opengraph(){
		setTimeout(makerect, 200);
	}

	$(".showcase-content-container").before("<div class = 'rect' style = 'position:absolute; z-index:-1;'></div>");

	makerect();

	function makerect(){
		$(".rect").height($(".showcase-content").last().find("img").height());
		var w = $(".showcase-content").last().find("img").width();
		$(".rect").width(w);
		$(".rect").css("margin-left", (680 - w)/2);
	}

	$("#plaything").carouFredSel({
		auto : false,
		circular : false,
		infinite : false,
		width : 620,
		prev : {
			button : "#btn-prev",
			key : "left"
		},
		next : {
			button : "#btn-next",
			key : "right"
		},
		swipe : {
			onTouch : true,
		}
	});
});
</script>

<?php $tpl = new RainTPL;$tpl_dir_temp = self::$tpl_dir;$tpl->assign( $this->var );$tpl->draw( dirname("footer") . ( substr("footer",-1,1) != "/" ? "/" : "" ) . basename("footer") );?>